<div class="row control-box">
  <div class="col-lg-8">
    <div class="search-box">
      <app-search-box (searchChange)="onSearchChanged($event)" placeholder="{{'todoDemo.management.Search' | translate}}" />
    </div>
  </div>
  <div class="col-lg-4">
    <ul class="nav flex-row">
      <li [class.active]="hideCompletedTasks" class="nav-item toolbaritem">
        <a class="nav-link" href="javascript:;" (click)="hideCompletedTasks = !hideCompletedTasks">
          <i class="fa fa-eye-slash"></i> {{'todoDemo.management.HideCompleted' | translate}}
        </a>
      </li>
      <li class="nav-item toolbaritem">
        <a class="nav-link" href="javascript:;" (click)="addTask()">
          <i class="fa fa-plus"></i> {{'todoDemo.management.AddTask' | translate}}
        </a>
      </li>
    </ul>
  </div>
</div>
<ngx-datatable class="material colored-header sm table-hover"
               [loadingIndicator]="loadingIndicator"
               [rows]="rows"
               [rowHeight]="35"
               [headerHeight]="37"
               [footerHeight]="35"
               [columns]="columns"
               [scrollbarV]="verticalScrollbar()"
               [columnMode]="'force'">
</ngx-datatable>

<ng-template #statusHeaderTemplate>
  <i class="fa fa-check-square-o"></i>
</ng-template>

<ng-template #statusTemplate let-row="row" let-value="value">
  <div class="form-check">
    <input class="form-check-input" attr.name="checkboxes-{{value}}" type="checkbox" [(ngModel)]="row.completed">
  </div>
</ng-template>

<ng-template #nameTemplate let-row="row" let-value="value">
  @if (editing[row.$$index + '-name']) {
    <input class="inline-editor" appAutofocus type="text" [value]="value"
           (blur)="updateValue($event, 'name', row)"
           (keydown.enter)="updateValue($event, 'name', row)"
           (keydown.escape)="editing[row.$$index + '-name'] = false"/>
  }
  @else {
    <span class="inline-label" [class.completed]="row.completed" attr.title="Double click to edit - {{value}}"
          (dblclick)="editing[row.$$index + '-name'] = true">
      {{value}}
    </span>
  }
</ng-template>

<ng-template #descriptionTemplate let-row="row" let-value="value">
  @if (editing[row.$$index + '-description']) {
    <input class="inline-editor" appAutofocus type="text" [value]="value"
           (blur)="updateValue($event, 'description', row)"
           (keydown.enter)="updateValue($event, 'description', row)"
           (keydown.escape)="editing[row.$$index + '-description'] = false"/>
  }
  @else {
    <span class="inline-label" [class.completed]="row.completed" attr.title="Double click to edit - {{value}}"
          (dblclick)="editing[row.$$index + '-description'] = true">
      {{value}}
    </span>
  }
</ng-template>

<ng-template #actionsTemplate let-row="row">
  <a class="btn btn-link btn-sm" href="javascript:;" ngbTooltip="{{'todoDemo.management.Delete' | translate}}"
     container="body" (click)="delete(row)">
    <i class="fa fa-times"></i>
  </a>
  <a class="btn btn-link btn-sm" href="javascript:;" ngbTooltip="{{'todoDemo.management.Important' | translate}}"
     container="body" (click)="row.important = !row.important">
    <i [ngClass]="row.important ? 'fa fa-bookmark' : 'fa fa-bookmark-o'"></i>
  </a>
</ng-template>


<ng-template #editorModal let-modal>
  <div class="modal-header">
    <h5 class="modal-title"><i class="fa fa-tasks"></i> {{'todoDemo.editor.NewTask' | translate}}</h5>
    <button type="button" class="btn-close fs-sm" title="Close" (click)="modal.close()" tabindex="-1"></button>
  </div>
  <div class="modal-body">
    @if (formResetToggle) {
      <form name="taskEditorForm" #f="ngForm" novalidate (ngSubmit)="f.form.valid ? save() && modal.close() :
                        (!taskName.valid && showErrorAlert('Task name is required', 'Please enter a name for the task'));">
        <div class="mb-3 row">
          <label class="col-form-label col-md-3" for="taskName">{{'todoDemo.editor.Name' | translate}}:</label>
          <div class="col-md-9">
            <input appAutofocus type="text" id="taskName" name="taskName" placeholder="Enter task name" class="form-control"
                   [ngClass]="{'is-valid': f.submitted && taskName.valid, 'is-invalid' : f.submitted && !taskName.valid}"
                   [(ngModel)]="taskEdit.name" #taskName="ngModel" required />
            @if (f.submitted && !taskName.valid) {
              <span class="invalid-feedback">
                {{'todoDemo.editor.TaskNameRequired' | translate}}
              </span>
            }
          </div>
        </div>
        <div class="mb-3 row description-form-group">
          <label class="col-form-label col-md-3" for="taskDescription">{{'todoDemo.editor.Description' | translate}}:</label>
          <div class="col-md-9">
            <input type="text" id="taskDescription" name="taskDescription" placeholder="Enter task description"
                   class="form-control" [(ngModel)]="taskEdit.description" />
          </div>
        </div>
        <div class="row">
          <div class="offset-md-3 col-md-9">
            <div class="form-check">
              <input class="form-check-input" id="isImportant" name="isImportant" type="checkbox" [(ngModel)]="taskEdit.important">
              <label for="isImportant" class="form-check-label">{{'todoDemo.editor.Important' | translate}}</label>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <hr class="hr-separator" />
          </div>
        </div>
        <div class="float-end">
          <button type="submit" class="btn btn-primary">{{'todoDemo.editor.AddTask' | translate}}</button>
        </div>
        <div class="clearfix"></div>
      </form>
    }
  </div>
</ng-template>
